<script setup>
import { computed, onMounted, reactive, ref, watchEffect } from 'vue';
import data from "@/untils/address/states.json"
const formLabelWidth = '100px'
//  import dayjs from "dayjs"
import { ElMessage } from 'element-plus'
// import { addarea ,addschoolbasics,updateClass, updateschoolbasics} from '../../api/request';
import { getActivationapi } from '../../api/api';
let formRef = ref(null)
let props = defineProps({
    icondialogFormVisible: Boolean,
})
let total = ref(0)
let page = ref(1)
let pageSize = ref(5)
let tableData = ref([])
async function getActivation() {
    let data = await getActivationapi(page.value, pageSize.value)
    if (data.code == 200) {
        total.value = data.total
        tableData.value = data.rows
    }
}
watchEffect(async () => {
    if (props.icondialogFormVisible) {
       getActivation()
    }
})
onMounted(async () => {

})
let emits = defineEmits(["closeicon", 'update:formlist'])
function closedialog(formEl) {
    // // 再次点击清空inp的值
    if (!formEl) return
    // formEl.resetFields()
    // // // 向父组件发送自定义事件
    emits("closeicon")
}
let closefun = () => {
    emits("closeicon")
}

async function getCurrentPage(e) {
    console.log("获取当前页", e);
    page.value = e
    getActivation()
}
let switchActivationDay = (activationDay) => {
    if (activationDay == 0) {
        return 'test code'
    } else if (activationDay == -1) {
        return 'Permanent code'
    } else if (activationDay == -2) {
        return 'reset code'
    } else {
        return activationDay + 'day'
    }
}
</script>
<template>
    <div class="editclass">
        <el-dialog :model-value="icondialogFormVisible" style="padding: 40px" title="Activation Code List"
            @close="closefun">
            <div class="tab">
                <el-table stripe :data="tableData" @selection-change="check()" style="width: 100%;" :fit="true">
                    <el-table-column width="20"></el-table-column>
                    <el-table-column property="activationCode" label="code"/>
                    <el-table-column property="equipmentNumber" label="number" width="150"/>
                    <el-table-column property="activationDay" label="activationDay">
                        <template #default="scope">
                            <span>{{ switchActivationDay(scope.row.activationDay) }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column property="generationTime" label="generationTime" />
                    <el-table-column property="expirationStatus" label="expirationStatus">
                        <template #default="scope">
                            <span>{{ scope.row.expirationStatus == 0 ? 'normal' : 'expire' }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column property="optUsername" label="operator" />
                </el-table>
                <div style="display: flex;justify-content: end;align-items: center; margin-top: 25px">
                    <el-pagination background layout="prev, pager, next" :page-count="Math.ceil(total / pageSize)"
                        style="text-align: end;" :current-page='page' @current-change="getCurrentPage" />
                </div>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="closefun">cansel</el-button>
                </div>
            </template>
        </el-dialog>

    </div>
</template>

<style lang="scss" scoped>
.one {
    display: flex;
}

.two-column-form .form-row {
    display: flex;
    justify-content: space-between;
}

.two-column-form .el-form-item {
    width: 48%;
}

.address-container {
    display: flex;
    align-items: center;
}

/* 调整表单标签宽度 */
.two-column-form :deep(.el-form-item__label) {
    width: 80px;
    text-align: right;
    padding-right: 12px;
}

/* 响应式设计 - 小屏幕时变为单列 */
@media (max-width: 768px) {
    .two-column-form .form-row {
        flex-direction: column;

        .el-form-item {
            width: 100%;
        }
    }

    .address-container {
        flex-direction: column;
        align-items: flex-start;

        .el-select {
            width: 100% !important;
            margin-right: 0 !important;
            margin-bottom: 10px;
        }
    }
}
</style>